<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06 demo</title>
</head>

<body>
    <ul id="itemList">
        <li>项目 1</li>
        <li>项目 2</li>
        <li>项目 3</li>
        <li>项目 4</li>
    </ul>

    <script>
        // 获取父节点 ul
        const ul = document.getElementById('itemList');

        // 在父节点上添加事件监听器
        ul.addEventListener('click', function (event) {
            // 检查点击的是否是 <li> 元素
            if (event.target.tagName.toLowerCase() === 'li') {
                // 获取点击的 <li> 内容
                const itemText = event.target.textContent;

                // 在控制台输出内容
                console.log(`点击的项目: ${itemText}`);

                // 添加一些额外效果，例如点击后修改背景色
                event.target.style.backgroundColor = '#f0f0f0';
            }
        });

    </script>
</body>

</html>